import { Avatar, Divider, List, Skeleton } from 'antd';
import React, { useEffect, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import * as action from "../action"
import {useDispatch,useSelector} from "react-redux"

const Antpull = () => {
  const [loading, setLoading] = useState(false);
  const [data,setData] = useState([])
  const [num, setNum] = useState(1);
  const [flag,setFlag] = useState(true)
  const store = useSelector((state)=>{
    return {
        ...state. tablereducer
    }
})
const dispatch = useDispatch()

  const loadMoreData = (init) => {
    setTimeout(()=>{

        if (loading) {
            return;
          }
      
          setLoading(true);
          // fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo')
          //   .then((res) => res.json())
          //   .then((body) => {
          //     setData([...data, ...body.results]);
          //     setLoading(false);
          //   })
           
          if (init) { // 初始化加载那一次
              dispatch(action.getlantist())
              setLoading(false)
             
          }
          else {  // 上拉的时候
              dispatch(action.getlantist("shangla"))
              setNum(num=>num+1)
            setLoading(false)
          }


    },1000)
 
   

  };

  useEffect(() => {
    loadMoreData("init");
  }, []);
  useEffect(()=>{
      if (num == 10) {
        setFlag(false)
      }
  },[num])
  return (
    <div
    id="scrollableDiv"
    style={{
      height: 400, // 首屏数据必须超过这个高，如果没有超过这个高，不会执行加载
      overflow: 'auto',
      padding: '0 16px',
      border: '1px solid rgba(140, 140, 140, 0.35)',
    }}
  >
    <InfiniteScroll
      dataLength={num * 10} // 当前的列表应该展示多少个
      next={loadMoreData}  // 只要一下拉就会触发这个方法
      hasMore={flag} // flag 如果为true就不在加载了
      loader={<h4>Loading...</h4>} // 加载时候的loading
      endMessage={<Divider plain>It is all, nothing more 🤐</Divider>} // 没有数据的提示
      scrollableTarget="scrollableDiv" // 不要改他
    >
        {
            store.antarr && store.antarr.length?store.antarr.map((item,index)=>{
                return <div key={index}>
                    <img src={item.img} alt="" />
                    <span>{item.tit}</span>
                </div>
            }):""
        }
    </InfiniteScroll>
  </div>
  );
};

export default Antpull;
